<template>
  <div class="content-wrapper">
    <div class="content-container">
      <el-form :inline="true" :model="listQuery" class="filter-container">
        <el-form-item label="状态">
          <el-select
            v-model="listQuery.status"
            size="mini"
            style="width: 120px"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="通知类型">
          <el-select
            v-model="listQuery.orderType"
            size="mini"
            style="width: 120px"
          >
            <el-option
              v-for="item in orderTypeOptions"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="标签">
          <el-select
            v-model="listQuery.tag"
            size="mini"
            style="width: 100px"
            clearable
          >
            <el-option
              v-for="item in manufactureOrderTagOptions"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="搜索条件">
          <el-select
            v-model="listQuery.keywordField"
            size="mini"
            placeholder="请选择"
            style="width: 100px"
          >
            <el-option
              v-for="item in conditionOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input
            v-model="listQuery.keyword"
            size="mini"
            style="width: 120px"
          />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="listQuery.datetimeRange"
            type="daterange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            size="mini"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            class="filter-item"
            size="small"
            round
            type="primary"
            icon="el-icon-search"
            @click="getList"
          >
            搜索
          </el-button>
          <el-dropdown trigger="click" class="filter-item">
            <el-button size="mini" round icon="el-icon-plus">
              新增<i class="el-icon--right button-icon" />
            </el-button>
            <el-dropdown-menu slot="dropdown" class="user-dropdown">
              <el-dropdown-item @click.native="handleCreateSplitOrder">
                创建分装通知单
              </el-dropdown-item>
              <el-dropdown-item @click.native="handleCreateManufactureOrder">
                创建生产通知单
              </el-dropdown-item>
              <el-dropdown-item @click.native="handleImportOrder">
                导入分装通知单
              </el-dropdown-item>
              <el-dropdown-item @click.native="handleImportOrder">
                导入生产通知单
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <!-- <el-button
            class="filter-item"
            size="small"
            round
            icon="el-icon-coordinate"
            @click="handleResultOrder(0)"
          >
            交付
          </el-button> -->
        </el-form-item>
      </el-form>
      <el-table
        v-loading="listLoading"
        :data="list"
        highlight-current-row
        default-expand-all
        height="600"
        align="center"
        header-cell-class-name="custome-el-table-header-cell2"
        cell-class-name="custome-el-table-cell2"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column
          type="selection"
          width="50"
          fixed="left"
          :selectable="checkbox"
        /> -->
        <el-table-column type="expand" width="20">
          <template slot-scope="{ row }">
            <el-col :span="13">
              <OrderGoodsTableTemplate
                :goods-data-list="row.goodsList || []"
                :goods-type="row.orderType"
              /></el-col>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100px" fixed="left">
          <template slot-scope="{ row }">
            {{ formatByKeyValue(statusOptions, row.status) }}
          </template>
        </el-table-column>
        <el-table-column label="类型" width="100px" fixed="left">
          <template slot-scope="{ row }">
            {{ formatByKeyValue(orderTypeOptions, row.orderType) }}
          </template>
        </el-table-column>
        <el-table-column label="标签" prop="tag" width="100px" fixed="left" />
        <el-table-column
          label="通知单号"
          prop="manufactureOrderCode"
          width="150px"
          fixed="left"
        />
        <el-table-column
          label="来源单号"
          prop="sourceOrderCode"
          width="150px"
          fixed="left"
        />
        <el-table-column
          label="计划日期"
          prop="expectManufactureDate"
          width="100px"
        />
        <el-table-column
          label="复溶情况"
          prop="reconstitutionStatus"
          width="100px"
        >
          <template slot-scope="{ row }">
            {{
              formatByKeyValue(
                reconstitutionStatusOptions,
                row.reconstitutionStatus
              )
            }}
          </template>
        </el-table-column>
        <el-table-column label="领料仓库" prop="fromWarehouseId" width="100px">
          <template slot-scope="{ row }">
            {{
              formatByKeyValue(
                manufactureOrderWarehouseOptions,
                row.fromWarehouseId
              )
            }}
          </template>
        </el-table-column>
        <el-table-column label="入库仓库" prop="toWarehouseId" width="100px">
          <template slot-scope="{ row }">
            {{
              formatByKeyValue(
                manufactureOrderWarehouseOptions,
                row.toWarehouseId
              )
            }}
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="memo" min-width="200px" />
        <el-table-column label="通知人" prop="createUserName" width="100px" />
        <el-table-column label="通知时间" prop="createTime" width="160px" />
        <el-table-column label="操作人" prop="assignUserName" width="100px" />
        <el-table-column label="操作时间" prop="assignTime" width="160px" />
        <el-table-column
          label="开始时间"
          prop="manufactureTime"
          width="160px"
        />
        <el-table-column label="完成人" prop="finishUserName" width="100px" />
        <el-table-column label="完成时间" prop="finishTime" width="160px" />
        <el-table-column label="操作" align="center" width="80px" fixed="right">
          <template slot-scope="{ row }">
            <el-dropdown trigger="click" class="filter-item">
              <el-button type="text" class="el-icon-more" />
              <el-dropdown-menu slot="dropdown" class="user-dropdown">
                <el-dropdown-item
                  v-if="row.status === 10"
                  @click.native="handleEditOrder(row)"
                >
                  编辑
                </el-dropdown-item>
                <el-dropdown-item
                  v-if="row.status === 10"
                  @click.native="handleAssignOrder(row)"
                >
                  分配任务
                </el-dropdown-item>
                <!-- <el-dropdown-item
                  v-if="row.status === 40"
                  @click.native="handleResultOrder(1, row)"
                >
                  交付
                </el-dropdown-item> -->
                <el-dropdown-item @click.native="handleAuditOrder(row)">
                  导出明细
                </el-dropdown-item>
                <!-- <el-dropdown-item
                  v-if="row.status === 40"
                  @click.native="handleAuditOrder(row)"
                >
                  结果输出
                </el-dropdown-item> -->
                <el-dropdown-item
                  v-if="row.status === 10"
                  @click.native="handleCancelOrder(row)"
                >
                  取消
                </el-dropdown-item>
                <el-dropdown-item @click.native="handleViewOrder(row)">
                  查看
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <SaveSplit
        :visible.sync="saveSplitDialogVisible"
        :dialog-status="saveSplitDialogStatus"
        :order-type="orderType"
        :tag-options="manufactureOrderTagOptions"
        :warehouse-options="warehouseOptions"
        :save-split-current="currentRow"
        @save="handleSaveManufactureOrder"
      />
      <SaveManufacture
        :visible.sync="saveManufactureDialogVisible"
        :dialog-status="saveManufactureDialogVisibleStatus"
        :order-type="orderType"
        :tag-options="goodsUnitOptions"
        :unit-options="manufactureOrderUnitOptions"
        :warehouse-options="warehouseOptions"
        :save-split-current="currentRow"
        @save="handleSaveManufactureOrder"
      />
      <Assign
        :visible.sync="assignDialogVisible"
        :order-type-options="orderTypeOptions"
        :manufacture-goods-type-options="manufactureGoodsTypeOptions"
        :split-goods-type-options="splitGoodsTypeOptions"
        :current-order="currentRow"
        @pagination="getList"
      />
      <pagination
        v-show="total > 0"
        :total="total"
        :page-number.sync="listQuery.pageNumber"
        :page-size.sync="listQuery.pageSize"
        @pagination="getList"
      />
      <ViewOrder
        :visible.sync="viewVisible"
        :current-row="currentRow"
        :status-options="taskStatusOptions"
        :tag-options="manufactureOrderTagOptions"
        :unit-options="manufactureOrderUnitOptions"
      />
      <HandOrder
        :visible.sync="handVisible"
        :current-data="handOrderData"
        :order-type-options="orderTypeOptions"
      />
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import SaveSplit from './components/saveSplit.vue'
import SaveManufacture from './components/saveManufacture.vue'
import Assign from './components/assign.vue'
import UglyMap from '@/utils/uglyMap'
import OrderGoodsTableTemplate from '@/views/manufacture/order/components/orderGoodsTableTemplate'
import ViewOrder from './components/viewOrder.vue'
import HandOrder from './components/handOrder'
import {
  getBeginDay,
  getEndDay,
  getTimePickerShortcuts,
  formatByKeyValue
} from '@/utils'
import {
  pageManufactureOrder,
  orderListPreOptions
} from '@/api/mes/manufactureOrder'

import { newSort } from '@/utils/common.js'

export default {
  components: {
    Pagination,
    SaveSplit,
    SaveManufacture,
    Assign,
    OrderGoodsTableTemplate,
    ViewOrder,
    HandOrder
  },
  data() {
    return {
      ORDER_TYPE_SPLIT: 1,
      ORDER_TYPE_MANUFACTURE: 2,
      statusOptions: null,
      orderTypeOptions: null,
      reconstitutionStatusOptions: null,
      manufactureOrderTagOptions: null,
      warehouseOptions: null,
      manufactureGoodsTypeOptions: null,
      splitGoodsTypeOptions: null,
      conditionOptions: [
        { value: 'manufactureOrderCode', label: '生产订单号' },
        { value: 'sourceOrderCode', label: '来源单号' }
      ],
      pickerOptions: {
        shortcuts: getTimePickerShortcuts()
      },
      listLoading: false,
      total: 0,
      list: [],
      listQuery: {
        pageNumber: 1,
        pageIndex: 0,
        pageSize: 10,
        datetimeRange: [],
        withGoods: true
      },
      orderType: null,
      saveSplitDialogVisible: false,
      saveManufactureDialogVisible: false,
      saveSplitDialogStatus: '',
      assignDialogVisible: false,
      currentRow: null,
      saveManufactureDialogVisibleStatus: '',
      manufactureResultGoodsList: null,
      manufactureOrderUnitOptions: [],
      manufactureOrderWarehouseOptions: null,
      viewVisible: false,
      taskStatusOptions: [],
      goodsUnitOptions: [],
      handVisible: false,
      handOrderData: []
    }
  },
  watch: {
    listQuery: {
      handler(data) {
        this.getList()
      }
    }
  },
  mounted() {
    const manufactureOrderCode = this.$route.query.code
    if (manufactureOrderCode) {
      this.listQuery.keywordField = 'sourceOrderCode'
      this.listQuery.keyword = manufactureOrderCode
    }
    this.listQuery.datetimeRange.push(getBeginDay(0))
    this.listQuery.datetimeRange.push(getEndDay(0))
    orderListPreOptions().then((response) => {
      const data = response.data
      this.statusOptions = data.orderStatus
      this.orderTypeOptions = data.orderType
      this.reconstitutionStatusOptions = data.reconstitutionStatus
      this.manufactureOrderTagOptions = data.manufactureOrderTag
      this.warehouseOptions = data.warehouse
      this.manufactureGoodsTypeOptions = data.manufactureGoodsType
      this.splitGoodsTypeOptions = data.splitGoodsType
      this.manufactureOrderUnitOptions = data.weightUnit
      this.manufactureOrderWarehouseOptions = data.warehouse
      this.taskStatusOptions = data.taskStatus
      this.goodsUnitOptions = data.goodsUnit
      this.getList()
    })
  },
  methods: {
    newSort,
    formatByKeyValue,
    getList() {
      this.listLoading = true
      this.listQuery.pageIndex = this.listQuery.pageNumber - 1
      pageManufactureOrder(this.listQuery)
        .then((res) => {
          const data = res.data
          this.list = data.rows
          if (this.list) {
            this.list.forEach((order) => {
              if (order.orderType === this.ORDER_TYPE_SPLIT) {
                order.goodsMap = new UglyMap()
                const goodsList = order.goodsList || []
                goodsList.forEach((goods) => {
                  const subGoodsList = order.goodsMap.computeIfAbsent(
                    goods.goodsCode,
                    (k) => []
                  )
                  subGoodsList.push(goods)
                })
                order.goodsMap.values().forEach((e) => {
                  e.sort((e1, e2) => {
                    return e2.goodsType - e1.goodsType
                  })
                })
              }
            })
          }
          this.list.forEach((e) => {
            newSort(e.goodsList, 'goodsCode')
          })

          this.total = data.total
        })
        .finally(() => {
          this.listLoading = false
        })
    },
    handleFilter() {
      this.listQuery.pageNumber = 1
      this.getList()
    },
    handleCreateSplitOrder() {
      this.orderType = 1
      this.saveSplitDialogStatus = 'create'
      this.saveSplitDialogVisible = true
    },
    handleCreateManufactureOrder() {
      this.orderType = 2
      this.saveManufactureDialogVisibleStatus = 'create'
      this.saveManufactureDialogVisible = true
    },
    handleImportOrder() {
      //
    },
    handleSaveManufactureOrder() {
      this.handleFilter()
    },
    handleAssignOrder(row) {
      this.currentRow = []
      this.currentRow = row
      this.assignDialogVisible = true
    },
    handleEditOrder(row) {
      this.currentRow = []
      if (row.orderType === 1) {
        this.saveSplitDialogStatus = 'update'
        this.saveSplitDialogVisible = true
        this.currentRow = row
      } else {
        this.saveManufactureDialogVisibleStatus = 'update'
        this.saveManufactureDialogVisible = true
        this.currentRow = row
      }
    },
    handleCancelOrder(row) {
      this.$confirm('此操作将取消该通知, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleViewOrder(row) {
      this.currentRow = []
      this.saveManufactureDialogVisibleStatus = 'view'
      this.viewVisible = true
      this.currentRow = row
    },
    handleAuditOrder(row) {},
    handleResultOrder(type, row) {
      console.log(this.manufactureResultGoodsList, 'manufactureResultGoodsList')

      if (type === 0) {
        const data = this.manufactureResultGoodsList || []
        const manufactureOrderId = []
        data.forEach((e) => {
          manufactureOrderId.push(e.manufactureOrderId)
        })
        if (data.length <= 0) {
          this.$message.warning('未选择数据')
          return
        } else {
          this.handVisible = true
          this.handOrderData = manufactureOrderId
        }
      } else {
        this.handVisible = true

        this.handOrderData = [row.manufactureOrderId]
      }
    },
    handleSelectionChange(val) {
      this.manufactureResultGoodsList = val
    },
    updateOrderData() {
      this.manufactureResultGoodsList = []
    },
    checkbox(row) {
      if (row.status === 40 || row.status === 30) {
        return true
      } else {
        return false
      }
    }
  }
}
</script>
